<template>
  <v-chart class="chart" :option="option" />
</template>
<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
export default {
  name: "Echarts",
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "", // 背景色 dark
  },
  props: ["optionData"],
  data() {
    return {
      option: {
        title: {
          text: this.optionData.title,
          left: "left", // 位置: left center right
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          //   orient: "vertical",
          center: "center", // 位置: left center right
          data: this.optionData.legendData,
        },
        series: [
          {
            name: this.optionData.seriesName,
            type: "pie",
            radius: this.optionData.size,
            data: this.optionData.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
};
</script>
<style scoped>
.chart {
  height: 300px;
}
</style>
